<template>
  <div class="usercenter-box">
    <div class="usercenter-index-items">
      <div class="usercenter-leftbox">
        <div class="tradebox">
          <div class="tradebox-left">
            <h6>我的关注</h6>
            <div class="tradebox-con">
              <ul>
                <li>
                  <a href="/favorite4">
                    <i class="iconfont icon-shoucang"></i>
                    <span>收藏</span>
                  </a>
                </li>
                <li>
                  <a href="/message/list4">
                    <i class="iconfont icon-duanxin"></i>
                    <span>等级</span>
                  </a>
                </li>

              </ul>
            </div>
          </div>
          <div class="tradebox-left tradebox-right">
            <h6>交易订单</h6>
            <div class="tradebox-con">
              <ul>
                <li>
                  <a href="">
                    <i class="iconfont icon-chulizhongicon"><span class="layui-badge">0</span></i>
                    <span>待处理</span>
                  </a>
                </li>
                <li>
                  <a href="">
                    <i class="iconfont icon-chulizhong"><span class="layui-badge">0</span></i>
                    <span>处理中</span>
                  </a>
                </li>
                <li>
                  <a href="">
                    <i class="iconfont icon-chuliwancheng"></i>
                    <span>已完成</span>
                  </a>
                </li>
                <li>
                  <a href="">
                    <i class="iconfont icon-quxiao"></i>
                    <span>已取消</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="usercenter-rightbox ">
        <div class="tradebox-left">
          <h6>售后服务</h6>
          <div class="tradebox-con">
            <ul>
              <li>
                <a href="">
                  <i class="iconfont icon-tousu"><span class="layui-badge">0</span></i>
                  <span>投诉</span>
                </a>
              </li>
              <li>
                <a href="/message/list4">
                  <i class="iconfont icon-duanxin"><span class="layui-badge">0</span></i>
                  <span>站内信</span>
                </a>
              </li>
              <li>
                <a href="">
                  <i class="iconfont icon-tuikuan1"></i>
                  <span>退款</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="usercenter-index-items">
      <div class="usercenter-leftbox">
        <div class="user-index-ad">
          <h6>首页公告：</h6>
          <div>
            <ul style="top: 0px;">
              <li
                v-for="item in noticeList"
                :key="item.systemNoticeID"
              >
                <a
                  :style="`color: ${item.color}`"
                  :href="`/notice/${item.systemNoticeID}`"
                  style="font-weight:bold;"
                >
                  {{ item.systemNoticeTitle }}
                </a>
              </li>
              <!--              <li><a target="_blank" >1</a></li>-->
            </ul>
          </div>

        </div>
      </div>
      <div class="usercenter-rightbox ">
        <div class="topartner">
          <a
            class="layui-btn layui-btn-normal layui-btn-fluid"
            href="/vip4">
            <i class="iconfont icon-hezuowoshou"></i>开通分站
          </a>
        </div>
      </div>
    </div>
    <input name="userqq" value="982267890" type="hidden">
    <textarea name="tcgg" style="display:none"></textarea>
    <div class="usercenter-index-items">
      <div class="usercenter-leftbox usercenter-myaccount">
        <div class="layui-row layui-col-space10">
          <div class="layui-col-md4" v-for="(val, key, index) in supply" :key="key">
            <p><i class="iconfont icon-yue2"></i>{{key}}</p>
            <a class="overwords" >{{val}}元</a>
          </div>
        </div> 
      </div>
      <div class="usercenter-rightbox "  >
        <div class="usercenter-index-safe">
          <h6>安全等级</h6>
          <div class="safebar">
            <div class="safebar-l">
              <!-- <span style="color: red;">危险</span> -->
              <!-- <span style="color: #1E9FFF;">一般</span> -->
              <!-- <span style="color: #5FB878;">安全</span> -->

              <span style="color: #5FB878;">一般</span>
            </div>
            <div class="safebar-c">
              <p><span style="width: 30%;"></span></p>

            </div>
            <div class="safebar-r">
              <a >提升&gt;&gt;</a>
            </div>
          </div>

          <div class="safebox">
            <div class="layui-row layui-col-space10">
              <div class="layui-col-md6">
                <p>手机<a  style="padding: 0px 4px;">立即绑定</a></p>
              </div>
              <div class="layui-col-md6">
                <p>邮箱<a style="padding: 0px 4px;">立即绑定</a></p>
              </div>

              <div class="layui-col-md6">
                <p>微信
                  <a >立即绑定</a>								</p>
              </div>

              <div class="layui-col-md6">
                <p>ＱＱ
                  <a  v-if="user.isQq"   @click="unbindQQ">解除绑定</a>
                <a v-else>尚未绑定</a>
                </p>
<!--                  <a v-if="user.isQq"-->
<!--                  >已绑定&nbsp;&nbsp;&nbsp;&nbsp;<el-button-->
<!--                    type="primary"-->
<!--                    size="small"-->
<!--                    @click="unbindQQ"-->
<!--                  >解除绑定</el-button-->
<!--                  ></a>-->
<!--                  <a v-else>尚未绑定</a>-->
<!--                </p>-->
                <!--                  <a href="http://oe.11kys.cn/kys-oauth.html?type=qq">立即绑定</a>								</p>-->

              </div>

            </div>
          </div>
        </div>
      </div>
    </div>



    <div class="">
      <div class="usercenter-leftbox ">
        <div class="news-items" style="width: 678px;border: 1px solid #fff; height: 405px;">
          <h6>订单记录<a href="/orders4">&gt;&gt;</a></h6>
          <ul class="layui-timeline">
            <div class="layui-table-box">
              <div class="layui-table-header" style="border-style: none;">
                <div class="common-table-box orders">
                  <section>
                    <el-table v-loading="isLoading" :data="tableData" style="width: 100%">
                      <!-- <el-table-column
                        prop="orderCode"
                        label="订单号"
                        width="180"
                      ></el-table-column> -->
                      <el-table-column label="商品名称">
                        <template slot-scope="{ row }">
                          <div style="line-height: 16px">{{ row.goodsName }}</div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="goodsTypeName" label="商品类型"></el-table-column>
                      <!-- <el-table-column label="数量">
                        <template slot-scope="{ row }">
                          {{ row.goodsNum || 0 }}
                        </template>
                      </el-table-column> -->
                      <!-- <el-table-column label="购买单价">
                        <template slot-scope="{ row }">{{ row.goodsPrice | n3 }}</template>
                      </el-table-column> -->
                      <el-table-column label="销售单价">
                        <template slot-scope="{ row }">{{ row.orderPrice | n3 }}</template>
                      </el-table-column>
                      <!-- <el-table-column prop="address" label="充值账号"></el-table-column> -->
                      <!-- <el-table-column
                        prop="goodsUserName"
                        label="购卡对象"
                      ></el-table-column> -->
                      <el-table-column label="充值信息">
                        <!-- <template v-if="row.createTime" slot-scope="{ row }">
                          {{ row.createTime | dateFormat }}
                        </template> -->
                      </el-table-column>
                      <el-table-column label="购买日期">
                        <template v-if="row.createTime" slot-scope="{ row }">
                          {{ row.createTime | dateFormat }}
                        </template>
                      </el-table-column>
                      <el-table-column label="订单状态" >
                        <template slot-scope="{ row }">
                          <el-button size="mini" type="primary" >
                            {{ row.orderState | stateText }}
                          </el-button>
                          <el-button size="mini" @click="goComplain(row)">{{row.complaintID ? '查看投诉' : '投诉订单'}}</el-button>
                        </template>
                      </el-table-column>
                      <el-table-column label="订单详情" >
                        <template slot-scope="{ row }">
            <!--              @click="detailShow(row)"-->
                          <el-button size="mini" type="primary" @click="detailShow(row)">
                            查看详情
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    <!-- <el-pagination
                      background
                      layout="prev, pager, next, jumper"
                      :page-size="query.pageSize"
                      :total="dataTotal"
                      @current-change="pageChage"
                    >
                    </el-pagination> -->
                  </section>
                  <orderDetailDialog ref="detail"></orderDetailDialog>
                </div>
              </div>
            </div>
          </ul>
        </div>
      </div>
      <div class="usercenter-rightbox">
        <div class="news-items" style="width: 288px;border: 1px solid #fff;height: 355px;">
          <h6>帮助中心<a target="_blank" href="/message/list4">&gt;&gt;</a></h6>
          <ul>
            <li
              v-for="item in noticeList"
              :key="item.systemNoticeID">
              <a
                :style="`color: ${item.color}`"
                :href="`/notice4/${item.systemNoticeID}`"
                class="overwords"
                target="_blank">
                {{ item.systemNoticeTitle }}
                <span>{{ /(?<=-)\d{1,2}-\d{1,2}/g.exec(item.createTime)[0] }}</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import AccountDialog from '@/components/dialog/account'
import PasswordDialog from '@/components/dialog/password'
import TradePasswordDialog from '@/components/dialog/tradePassword'
import LoginLogDialog from '@/components/dialog/loginLog'
import orderDetailDialog from '@/components/orderDetailDialog'
import pageMixin from '@/mixins/page'
export default {
  layout: 'webIn4',
  components: {
    AccountDialog,
    PasswordDialog,
    TradePasswordDialog,
    LoginLogDialog,
    orderDetailDialog,
  },
  mixins: [pageMixin],
  middleware: ['tradePwd'],
  data() {
    return {
      supply: {}, // 统计信息，是个对象
      noticeList:[],
      tableData: [],
      pageNum:1,
    }
  },
  computed: {
    ...mapState({
      user: (state) => state.user,
      hasTradePwd: (state) => state.hasTradePwd,
      isSupply: (state) => state.isSupply
    })
  },
  created() {
    const b =  this.$axios.post('/site/systemNotice/pageFK', null, {
      params: {
        pageNum: 1,
        pageSize: 16
      }
    }).then((res)=> {
      this.noticeList = res.body.records
    });
this.getList();
    this.getRecommends()
    this.getNotice()
    this.getLoginTip()
    this.getSupplyTotal()
    this.getUserExtend()
  },
  methods: {
    async detailShow(item) {
      const res = await this.$axios.get(
        `/order/order/orderDetails?orderID=${item.orderID}`
      )
      if (res.code === 1001 ){//&& res.body) {
        this.$refs.detail.show(res.body || {})
      }
    },
    async getNotice() {
      const res = await this.$axios.post('/site/systemNotice/pageFK', null, {
        params: {
          pageNum: 1,
          pageSize: 5
        }
      })
      if (res.code === 1001 && res.body) {
        this.noticeList = res.body.records
      }
    },
    async getLoginTip() {
      if (this.$route.query.pay) return
      const res = await this.$axios.get('/site/loginTips/get')
      if (res.code === 1001 && res.body && res.body.content) {
        this.$alert(res.body.content, res.body.title)
      }
    },
    async getUserExtend() {
      const res = await this.$axios.get('/user/userExtend/get')
      if (res.code === 1001 && res.body) {
        const data = res.body;
        this.isSupplyNow = data.isSupply === 1
      } else {
        this.isSupplyNow = false
      }
    },
    async getRecommends() {
      const res = await this.$axios.get('/goods/catalog/getCRList')
      if (res.code === 1001 && res.body) {
        this.recommendsCategory = res.body
      }
    },
    getSupplyTotal() {
      // 查询统计
      this.$axios.get('/platform/site/getSupplyTotal').then(res => {
        this.supply = res.body
      })
    },
    pageChage5(val){
        this.pageNum=val;
        this.getList();
    },
    async getList() {
      this.isLoading = true
      const res = await this.$axios.post('/order/order/myOrder', null, {
        params:  {
        pageNum: this.pageNum,
        pageSize: 4
      },
      })
      if (res.code === 1001 && res.body) {
        this.tableData = res.body.records || []
        this.dataTotal = res.body.total
      }
      this.isLoading = false
    },
    async unbindQQ() {
      this.$confirm('此操作将解除QQ绑定, 是否确定?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .get('/user/oauth/unbind')
            .then((res) => {
              if (res.code === 1001) {
                this.$message({
                  showClose: true,
                  message: '解除QQ绑定成功',
                  type: 'success'
                })
                location.reload()
              } else {
                this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'error'
                })
              }
            })
            .catch((err) => {})
        })
        .catch(() => {
          this.$message.success('已取消')
        })
    },
  }
}
</script>

<style lang="scss" scoped>
.layui-btn {
  text-decoration: none;
}
.el-table__body-wrapper::-webkit-scrollbar {
  /*width: 0;宽度为0隐藏*/
  width: 0px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 2px;
  height: 50px;
  background: #eee;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.4);
}
.news-items h6::before{
  content: '';
  display: inline-block;
  vertical-align: -3px;
  background-color: #1E9FFF;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  margin-right: 15px;
}
.news-items h6 {
  border-bottom: 1px dashed #eee;
  font-size: 14px;
  color: #333;
  margin-top: 5px;
  line-height: 30px;
  font-weight: 400;
}
.layui-table tbody tr:hover {
  background-color: #ffffff;

}
.layui-table tr {
  border-top: 1px solid #f4f5f8;

}
// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style5/common.css';
// @import 'assets/style/style5/openlogin.css';
@import 'assets/style/style5/style.css';
@import 'assets/style/style5/font_1451715_0505c2bxv7b7.css';

.usercenter-myaccount {
  height: unset;
  .layui-col-md4 a {
    padding: 20px;
  }
  .layui-row {
    display: flex;
  }
  .layui-col-md4 {
    width: 33.333%;
  }
}

</style>
<style>
.orders .el-table thead tr, .el-table thead th {
  background-color: #fff !important;
}
.orders .el-table td, .el-table th.is-leaf {
    border: none !important;
}
</style>
